<template>
    <view class="index-content">
       
        <view class="index-coupon has-bg-white has-pd-10 top_30" >
			<!-- <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft"
			             style="position: fixed;z-index: 100;border-bottom: 1px solid ghostwhite;">
			    <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in category"
			          @tap="tabSelect" :data-id="index">
						<text :style="index==TabCur?'border-bottom: 4upx solid #E10A07;padding-bottom: 10upx;margin-right: -20upx;font-size: 32upx;':'background: #ffffff;color: #333333;margin-right: -10px'">
					{{item.name}}</text>
			    </view>
			</scroll-view> -->
			<view class=""  style="position: fixed;z-index: 100;border-bottom: 1px solid ghostwhite;width: 100%;" >
				<scroll-view scroll-x class="bg-white nav" style="width: 100%;" scroll-with-animation :scroll-left="scrollLeft">
					<view class="cu-item" :class="index==TabCurP?'text-green cur':''" v-for="(item,index) in categoryList"
					      @tap="tabSelectP" :data-id="index">  
							<text :style="index==TabCurP?'border-bottom: 4upx solid #E10A07;padding-bottom: 10upx;margin-right: -20upx;font-size: 32upx;':'background: #ffffff;color: #333333;margin-right: -10px'">
						{{item.name}}</text>
					</view>
				</scroll-view>
				<scroll-view scroll-x class="bg-white nav" >
					<view class="cu-item" style="width: 50%;text-align: center;" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in category"
					      @tap="tabSelect" :data-id="index">
							<text :style="index==TabCur?'border-bottom: 4upx solid #E10A07;padding-bottom: 10upx;margin-right: -20upx;font-size: 32upx;':'background: #ffffff;color: #333333;margin-right: -10px'">
						{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
            
            <view class="goods-list" v-if="couponlist.length > 0" style="padding-top: 170rpx">
                <orange-goods-card-home
                        v-for="(item,index) in couponlist"
                        :index="index%2"
                        :logo="logo"
						:shopname='item.shopname'
                        :tkmoney='item.tkmoney'
						:isEnable='isEnable'
						:tkmoneys='item.tkmoneys'
                        :itemid="item.itemid"
                        :is-invitation="isInvitation"
                        :itempic="item.itempic+'_310x310.jpg'"
                        :itemtitle="item.itemtitle"
                        :itemprice='"¥"+item.itemprice'
                        :itemsale='item.itemsale'
                        :itemendprice='""+item.itemendprice'
                        :couponmoney="item.couponmoney"
                ></orange-goods-card-home>
            </view>
        </view>
        <!-- 悬浮上拉 -->
        <view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '','']"
              style="bottom: 56px;">
            <text class="iconfont icon-shangla"></text>
        </view>


        <!-- 加载更多提示 -->
        <view class="s-col is-col-24" v-if="couponlist.length > 0">
            <load-more :loadingType="loadingType" :contentText="contentText"></load-more>
        </view>
        <!-- 加载更多提示 -->
        <empty v-if="couponlist.length === 0" des="暂无数据" show="false"></empty>
    </view>
</template>

<script>
    export default {
        onShareAppMessage(res) {
            return {
                title: '购物先领券，一年省一半',
                path: '/pages/index/index'
            }
        }, data() {
            return {
                logo: "../../static/img/mao.png",
                TabCur: 0,
				TabCurP: 0,
                scrollLeft: 0,
                category: [
                    {name: '实时榜', position: 1, total: 0, data: []},
                    {name: '热推榜', position: 2, total: 0, data: []},
                ],
				categoryList:[
					{name: '全部', position: 0, total: 0, data: []},
					{name: '女装', position: 1, total: 0, data: []},
					{name: '男装', position: 2, total: 0, data: []},
					{name: '内衣', position: 3, total: 0, data: []},
					{name: '美妆', position: 4, total: 0, data: []},
					{name: '配饰', position: 5, total: 0, data: []},
					{name: '鞋品', position: 6, total: 0, data: []},
					{name: '箱包', position: 7, total: 0, data: []},
					{name: '儿童', position: 8, total: 0, data: []},
					{name: '母婴', position: 9, total: 0, data: []},
					{name: '居家', position: 10, total: 0, data: []},
					{name: '美食', position: 11, total: 0, data: []},
					{name: '数码', position: 12, total: 0, data: []},
					{name: '家电', position: 13, total: 0, data: []},
					{name: '其他', position: 14, total: 0, data: []},
					{name: '车品', position: 15, total: 0, data: []},
					{name: '文体', position: 16, total: 0, data: []},
					{name: '宠物', position: 17, total: 0, data: []},
				],
                genderKey: "gender",
                couponlist: [],
                page: 1,
                min_id: 1,
                cid: 1,
                sort: 4,
                loadingType: 0,
                isInvitation:0,
				isEnable:'否',
                scrollTop: false,
                contentText: {
                    contentdown: "上拉显示更多",
                    contentrefresh: "正在加载...",
                    contentnomore: "没有更多数据了"
                },
				pid:0
            }
        },
        onLoad: function (e) {
            this.loadCouponList();
			this.getUserInfo();
			let a = this.$queue.getData("isEnable")
			if (a) {
				this.isEnable = a;
			}
            
        },
        onPageScroll: function (e) {
            this.scrollTop = e.scrollTop > 200;
        },
        methods: {
			getUserInfo(){
				let userId = this.$queue.getData("userId");
				if (userId) {
				    this.$Request.getT("/user/" + userId).then(res => {
				        if (res.status === 0) {
				            this.$queue.setData("image_url", res.data.image_url);
				            this.$queue.setData("mobile", res.data.phone);
				            this.isInvitation = res.data.isInvitation;
				            this.$queue.setData("isInvitation", res.data.isInvitation);
				            this.$queue.setData("relation", res.data.invitation);
				            this.$queue.setData("grade", res.data.grade);
				            this.$queue.setData("nickName", res.data.nickName);
				            this.$queue.setData("relation_id", res.data.relationId);
				            this.$queue.setData("gender", parseInt(res.data.gender));
				        }
				    });
				}
			},
            tabSelect(e) {
                this.TabCur = e.currentTarget.dataset.id;
                this.cid = this.category[e.currentTarget.dataset.id].position;
                this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
                this.page = 1;
                this.min_id = 1;
                this.loadCouponList("Refresh");
            },
			tabSelectP(e) {
			    this.TabCurP = e.currentTarget.dataset.id;
			    this.pid = this.categoryList[e.currentTarget.dataset.id].position;
			    this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			    this.page = 1;
			    this.min_id = 1;
			    this.loadCouponList("Refresh");
			},
            topScrollTap: function () {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });
            },

            loadCouponList: function (type) {
                this.loadingType = 1;
                uni.showLoading({
                    title: '加载中...'
                });
                this.$Request.get('/api/sales_list/apikey/maxd/sale_type/' + this.cid + '/back/10/min_id/' + this.min_id + '/cid/'+this.pid).then(res => {
                    this.loadingType = 0;
                    if (res.code === 1) {
                        if (this.page === 1) {
                            this.couponlist = [];
                        }
                        this.min_id = res.min_id;
                        res.data.forEach(d => {
							d.tkmoneys = (d.tkmoney * parseFloat(this.$queue.maxMoney())).toFixed(2);
                            let grade = this.$queue.getData("grade");
                            if (grade) {
                                d.tkmoney = (d.tkmoney * parseFloat(grade)).toFixed(2);
                            } else {
                                d.tkmoney = (d.tkmoney * parseFloat(this.$queue.minMoney())).toFixed(2);
                            }
                            d.itemsale = d.itemsale > 10000 ? "已售 " + (d.itemsale / 10000).toFixed(1) + "万" : "已售 " + d.itemsale;
                            this.couponlist.push(d);
                        })
                    } else {
                        this.loadingType = 2;
                    }
                    if (type === "Refresh") {
                        uni.stopPullDownRefresh(); // 停止刷新
                    }
                    uni.hideLoading();
                })
            },
            toGoodsInfo: function (itemid) {
                let relation_id = this.$queue.getData("relation_id");
                if (relation_id) {
                    uni.navigateTo({
                        url: "/pages/detail/goodsinfo?itemid=" + itemid + "&relation_id=" + relation_id,
                    })
                } else {
                    uni.navigateTo({
                        url: "/pages/detail/goodsinfo?itemid=" + itemid,
                    })
                }
            },
        },

        onReachBottom: function () {
            this.page = this.page + 1;
            this.loadCouponList();
        },
        onPullDownRefresh: function () {
            this.page = 1;
            this.min_id = 1;
            this.loadCouponList("Refresh");
        }
    }
</script>

<style lang="scss">
    @import "../../static/css/index.css";
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;
	
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
	
			&.current {
				color: $base-color;
	
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
</style>
